<!DOCTYPE html>
<html lang="en" class="no-js" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout" layout:decorator="layout">
<head>
    <title>优惠券类型管理</title>
</head>
<body>
<div layout:fragment="content">
    <div class="row">
        <div class="col-md-12">
            <div class="btn-group pull-right">
                <a href="index.html" th:href="@{/promotion/coupon/index}" id="link_return" class="btn green">返回<i
                        class="fa fa-arrow-circle-o-left"></i></a>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="form">
                <form role="form" id="form_grant_user_userrank" th:action="@{/promotion/coupon/grant_userRank}"
                      method="post" class="form-horizontal">

                    <input id="hidden_conponPromotionId1" type="hidden" name="couponPromotionId"
                           th:value="${couponPromotion.id}"/>
                    <h4 class="form-section">按用户级别发放</h4>

                    <div class="form-body">
                        <div class="form-group">
                            <label class="control-label col-md-3">按用户等级发放优惠券</label>

                            <div class="col-md-4">
                                <select name="userRankId" class="form-control">
                                    <option th:each="userRank : ${userRankList}" th:value="${userRank.id}"
                                            th:text="${userRank.rankName}"></option>
                                </select>
                            </div>
                        </div>
                        <div class="form-actions fluid">
                            <div class="col-md-offset-5 col-md-7">
                                <button type="button" id="bt_submit_userrank" name="bt_submit" class="btn blue">确定发送优惠券
                                </button>
                                <!-- <button type="reset" id="btn_reset" name="btn_reset" class="btn default">清空</button> -->
                            </div>
                        </div>
                    </div>
                </form>
            </div>

            <div class="form">
                <h4 class="form-section">按用户发放</h4>
                <div class="col-md-12">
                    <form onsubmit="return false;" th:action="@{/promotion/coupon/userSearch}" method="post" class="form-horizontal">
                        <div class="form-group">
                            <label class="control-label col-md-3">搜索:</label>
                            <div class="col-md-4">
                                <input type="text" id="text_username" name="username" placeholder="用户名" th:attr="value=${username}"
                                                  class="form-control input-inline"/>
                                <button type="button" id="bt_submit_userSearch" class="btn green"><i class="fa fa-search"></i></button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="col-md-12">
                    <form role="form" id="form_grant_user_user" th:action="@{/promotion/coupon/grant_user}"
                          method="post" class="form-horizontal">
                        <input id="hidden_conponPromotionId2" type="hidden" name="couponPromotionId"
                               th:value="${couponPromotion.id}"/>
                        <div class="form-body">
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-md-6 text-center">
                                        <label class="btn btn-block green">待选择用户列表</label>
                                    </div>
                                    <div class="col-md-6 text-center">
                                        <label class="btn btn-block green">已选择用户列表</label>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <select multiple="multiple" class="form-control" name="userList" size="10" id="select_userList">

                                        </select>
                                    </div>
                                    <div class="col-md-6">
                                        <select name="userIdArray" class="form-control" multiple="multiple" size="10" id="select_userIdArray">

                                        </select>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <button type="button" id="btn_left2right" class="btn btn-block green">&gt;&gt;&gt;&gt;&gt;&gt;</button>
                                    </div>
                                    <div class="col-md-6">
                                        <button type="button" id="btn_right2left" class="btn btn-block green">&lt;&lt;&lt;&lt;&lt;&lt;</button>
                                    </div>
                                </div>
                            </div>

                            <div class="form-actions fluid">
                                <div class="col-md-offset-5 col-md-7">
                                    <button type="button" id="bt_submit_user" name="bt_submit" class="btn blue">确定发送优惠券
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

<script th:inline="javascript">
    /*<![CDATA[*/
    $(document).ready(function () {
        $("#bt_submit_userrank").click(function () {
            document.forms[0].submit();
        });
        $("#bt_submit_userSearch").click(function () {
            var _username = $("#text_username").val();
            $.ajax({
                url: '/promotion/coupon/userSearch',
                type: 'post',
                data: {'username': _username},
                contentType: "application/x-www-form-urlencoded; charset=utf-8",
                error: function () {
                    alert('出错');
                },
                success: function (data) {
                    $("#select_userList").empty();
                    $.each(data, function (i, user) {
                        $("#select_userList").append($("<option value='" + user.id + "'> " + user.name + "</option>"));
                    });
                }
            });
        });

        $("#btn_left2right").click(function(){
            var $options = $("#select_userList option:selected");
            var $remove = $options.remove();
            $remove.appendTo($("#select_userIdArray"));
        });

        $("#btn_right2left").click(function(){
            var $options = $("#select_userIdArray option:selected");
            var $remove = $options.remove();
            $remove.appendTo($("#select_userList"));
        });

        $("#bt_submit_user").click(function () {
            $("#select_userIdArray option").each(function(){
                this.selected = true;
            });
            document.forms[2].submit();
        });
    });
    /*]]>*/
</script>